<script setup>
import {defineComponent, onMounted, reactive, ref} from "vue";
import {vDraggable, VueDraggable} from "vue-draggable-plus";
import TaskCard from "@/views/task/components/TaskCard.vue";
import {ElMessageBox} from "element-plus";
import {message} from "ant-design-vue";
import {deleteLine} from "@/api/line.js";
import AddCard from "@/views/task/components/AddCard.vue";
import {queryCard, updateSameLineSort} from "@/api/card.js";


const props = defineProps({
  line: {
    type: String,
  },
});
const list = ref([]);
const sameLineId = ref(null)
onMounted(() => {
  getCardList()
})
const getCardList = async () => {
  const param = {
    id: props.line.id
  }
  const res = await queryCard(param)
  if (res.code === 200) {
    list.value = res.data
    if (list.value.length > 0) {
      sameLineId.value = list.value[0].lineId
    }
  }
}
defineComponent({
  name: "TaskLane",
});
const emit = defineEmits(["delSuccess"])
const handleDelLine = () => {
  ElMessageBox.confirm("是否确认删除该面板？",
      "Warning",
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
    const params = {id: props.line.id}
    let res = await deleteLine(params)

    if (res.code === 200) {
      message.success("删除成功")
      emit("delSuccess")
    }
  }).catch()
      .finally(() => {
        delTaskId.value = null
      })
}
const handleCardRemove = async (e) => {
  console.log(list.value)
  const res = await updateSameLineSort({list:list.value})
  // console.log("remove",e)
}
const handleCardAdd = async (e) => {
  // console.log("add",e.data)
  //处理 同一条线上的排序
  list.value.forEach(item => {
    if (item.lineId !== sameLineId.value) {
      item.lineId = sameLineId.value
    }
  })
  const res = await updateSameLineSort({list:list.value})
}
const handleCardUpdate = async (e) => {
  // console.log("e",e)

  const res = await updateSameLineSort({list:list.value})
  console.log(res)
}
</script>

<template>
  <div class="lane-container">
    <div class="top-wrap flex-between-center">
      <h1 class="title">{{ props.line.lineName }}</h1>
      <div class="icon flex-center-center pointer" @click="handleDelLine">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>
    </div>

      <VueDraggable class="lane-box"
                    v-model="list"
                    animation="500"
                    group="card"
                    :on-remove="handleCardRemove"
                    :on-add="handleCardAdd"
                    :on-update="handleCardUpdate"
      >

        <template v-for="item in list" :key="item.id">
          <TaskCard :card="item" @delSuccess="getCardList"></TaskCard>
        </template>
      </VueDraggable>
    <add-card :id="props.line.id" @addCard="getCardList"></add-card>
  </div>
</template>

<style scoped lang="less">
.lane-container {
  flex-grow: 0;
  flex-shrink: 0;
  height: auto;
  width: 260px;
  background: #fff;
  border: 1px solid #d5d5d5;
  //backdrop-filter: blur(30px);
  margin: 15px 15px 0 0px;
  border-radius: 10px;
  padding: 15px 10px;
  //display: flex;
  //flex-direction: column;

  .top-wrap {
    height: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    .title {
      font-size: 16px;
      padding-left: 20px;
      font-weight: bolder;
    }

    .icon {
      height: 30px;
      width: 30px;
      border-radius: 5px;

      &:hover {
        background: #d3d3d3;
      }
    }
  }

  .lane-box {
    flex: 1;
    padding: 10px 0;
    .add-card {
    }
  }
}
</style>
